<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
</head>

<body>
    <table>
        <thead>
            <caption>
                商品
            </caption>
        </thead>
        <tbody>
            <tr>
                <td>炸鸡</td>
                <td>28元</td>
                <td><button id="zjtaiduola">-</button></td>
                <td><span id="zjsl">0</span></td>
                <td><button id="zjtaishaola">+</button></td>
            </tr>
            <tr>
                <td>可乐</td>
                <td>5元</td>
                <td><button id="kltaiduola">-</button></td>
                <td><span id="klsl">0</span></td>
                <td><button id="kltaishaola">+</button></td>
            </tr>
            <tr>
                <td>总价：</td>
                <td><span id="total">0</span></td>
            </tr>
        </tbody>
    </table>

    <!-- 
        请补全JavaScript代码，要求如下：
        1. 当点击"-"按钮时，商品数量减1
        2. 当点击"+"按钮时，商品数量加1
        3. 每当点击任意按钮时，购物面板中相关信息必须同步更新
        注意：
        1. 必须使用DOM0级标准事件(onclick)
     -->
    <script type="text/javascript">
        // 补全代码
        let zjtaiduola = document.querySelector('#zjtaiduola')//炸鸡减一
        let zjtaishaola = document.querySelector('#zjtaishaola')//炸鸡加一
        let zjsl = document.querySelector('#zjsl')
        let klsl = document.querySelector('#klsl')
        let kltaiduola = document.querySelector('#kltaiduola')//可乐减一
        let kltaishaola = document.querySelector('#kltaishaola')//可乐加一
        let total = document.querySelector('#total')
        zjtaiduola.onclick = () => {
            if (parseInt(zjsl.innerHTML) <= 0) {
                zjsl.innerHTML = 0
                // zjsl.innerText
            } else {
                zjsl.innerHTML = parseInt(zjsl.innerHTML) - 1
                total.innerHTML = parseInt(total.innerHTML) - 28
                total.innerHTML = total.innerHTML.toString()
            }

        }
        zjtaishaola.onclick = () => {
            zjsl.innerHTML = parseInt(zjsl.innerHTML) + 1
            total.innerHTML = parseInt(total.innerHTML) + 28
            total.innerHTML = total.innerHTML.toString()
        }
        kltaiduola.onclick = () => {
            if (klsl.innerHTML <= 0) {
                klsl.innerHTML = 0
            } else {
                klsl.innerHTML = parseInt(klsl.innerHTML) - 1
                total.innerHTML = parseInt(total.innerHTML) - 5
                total.innerHTML = total.innerHTML.toString()
            }
        }
        kltaishaola.onclick = () => {
            klsl.innerHTML = parseInt(klsl.innerHTML) + 1
            total.innerHTML = parseInt(total.innerHTML) + 5
            total.innerHTML = total.innerHTML.toString()
        }
        function f() { document.querySelector('#zjtaishaola').click(); document.querySelector('#kltaishaola').click(); return document.querySelector('#total').innerText === '33' }
        console.log(f());
    </script>
</body>

</html>